.haorooms{
  position: absolute; 
  top: 25px; 
  left: 25px;
  -webkit-animation: clockwise 4s linear infinite; 
  animation: clockwise 4s linear  infinite ;
  transform-origin: 60px 60px;
}
.haorooms em {
    display: block;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #4fc5cf;
    color:fff;
    -webkit-animation: counter-clockwise 1.5s linear infinite; animation: counter-clockwise 1.5s linear  infinite ;
}
@-webkit-keyframes clockwise{
  0%  { -webkit-transform: rotate(0deg) ;  }
  100%{ -webkit-transform: rotate(360deg); }
}
@keyframes clockwise {
  0%  { transform: rotate(0deg) ; }
  100%{ transform: rotate(360deg); }
}

@-webkit-keyframes counter-clockwise {
  0%  { -webkit-transform: rotate(360deg) ;  }
  100%{ -webkit-transform: rotate(0deg); }
}

@keyframes counter-clockwise {
  0%  { transform: rotate(360deg) ;  }
  100%{ transform: rotate(0deg); }
}

.haorooms2{
  position: absolute; 
  top: 32px; 
  left: 32px;
  -webkit-animation: clockwisea 4s linear infinite; 
  animation: clockwisea 4s linear  infinite ;
  transform-origin: 53px 53px;
}
.haorooms2 em {
    display: block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #fec22e;
    color:fff;
    -webkit-animation: counter-clockwisea 1.5s linear infinite; animation: counter-clockwisea 1.5s linear  infinite ;
}
@-webkit-keyframes clockwisea{
  0%  { -webkit-transform: rotate(360deg) ;  }
  100%{ -webkit-transform: rotate(0deg); }
}
@keyframes clockwisea {
  0%  { transform: rotate(360deg) ; }
  100%{ transform: rotate(0deg); }
}

@-webkit-keyframes counter-clockwisea {
  0%  { -webkit-transform: rotate(0deg) ;  }
  100%{ -webkit-transform: rotate(360deg); }
}

@keyframes counter-clockwisea {
  0%  { transform: rotate(0deg) ;  }
  100%{ transform: rotate(360deg); }
}

.haorooms3{
  position: absolute; 
  top: 6px; 
  left: 22px;
  -webkit-animation: clockwiseb 4s linear infinite; 
  animation: clockwiseb 4s linear  infinite ;
  transform-origin: 36px 36px;
}
.haorooms3 em {
    display: block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #4fc5cf;
    color:fff;
    -webkit-animation: counter-clockwiseb 1.5s linear infinite; 
    animation: counter-clockwiseb 1.5s linear  infinite ;
}
.haorooms4{
  position: absolute; 
  top: 6px; 
  left: 124px;
  -webkit-animation: clockwiseb 4s linear infinite; 
  animation: clockwiseb 4s linear  infinite ;
  transform-origin: 36px 36px;
}
.haorooms4 em {
    display: block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #fec22e;
    color:fff;
    -webkit-animation: counter-clockwiseb 1.5s linear infinite; 
    animation: counter-clockwiseb 1.5s linear  infinite ;
}
.haorooms5{
  position: absolute; 
  top: 6px; 
  left: 224px;
  -webkit-animation: clockwiseb 4s linear infinite; 
  animation: clockwiseb 4s linear  infinite ;
  transform-origin: 36px 36px;
}
.haorooms5 em {
    display: block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #a4cf27;
    color:fff;
    -webkit-animation: counter-clockwiseb 1.5s linear infinite; 
    animation: counter-clockwiseb 1.5s linear  infinite ;
}
@-webkit-keyframes clockwiseb{
  0%  { -webkit-transform: rotate(360deg) ;  }
  100%{ -webkit-transform: rotate(0deg); }
}
@keyframes clockwiseb {
  0%  { transform: rotate(360deg) ; }
  100%{ transform: rotate(0deg); }
}

@-webkit-keyframes counter-clockwiseb {
  0%  { -webkit-transform: rotate(0deg) ;  }
  100%{ -webkit-transform: rotate(360deg); }
}

@keyframes counter-clockwiseb {
  0%  { transform: rotate(0deg) ;  }
  100%{ transform: rotate(360deg); }
}

